import React, { useEffect ,useState} from 'react';
import { Button, Form, Input, Space, Popconfirm, Tag, message, Image } from 'antd';
import { produce } from 'immer';
import PaginationComponent from "./../../components/PaginationComponent";
import TableComponent from "./../../components/TableComponent";
import AddOrEdit from "./addOrEdit";
import dayjs from 'dayjs';
import { getinformationList, updateinformationStatus } from './../../api/information';
import type { PaginationProps, TableColumnsType, FormProps } from 'antd';
import type { informationReqType, informationResType, informationResDataType, informationReqStateType } from '../../types/informationType';
import styles from './index.module.scss';

const Information: React.FC = () => {
  const [form] = Form.useForm();
  const [reqForm, setReqForm] = useState<informationReqType>({
    keywords: "",
    paging: {
      page: 1,
      size: 10
    }
  });
  const [isModalOpen,setIsModalOpen]=useState<boolean>(false);
  const [informationId,setInformationId]=useState<number>();
  const [modalType,setModalType]=useState<'add'|'edit'>('add');
  const [data, setData] = useState<informationResType>({
    count: 0,
    data: []
  });
  // 表格
  const columns: TableColumnsType<informationResDataType> = [
    {
      title: '资讯ID',
      dataIndex: 'informationId',
      key: 'informationId',
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title'
    },
    {
      title: '内容详情',
      dataIndex: 'content',
      key: 'content',
      ellipsis:true,
      width:500
    },
    {
      title: '平台',
      dataIndex: 'source',
      key: 'source',
    },
    {
      title: '发布时间',
      dataIndex: 'createTime',
      key: 'createTime',
      render: (_, { createTime }) => {
        return dayjs.unix(createTime).format("YYYY-MM-DD hh:mm:ss")
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (_, { status }) => {
        if (status === 1) {
          return <Tag color='volcano' key={status}>
            上架
          </Tag>
        } else {
          return <Tag color='gold' key={status}>
            下架
          </Tag>
        }
      }
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      render: (_, { informationId, status }) => (
        <Space size="middle">
          <Button type="link" onClick={()=>{
            setInformationId(informationId);
            setIsModalOpen(true);
            setModalType('edit');
          }}>编辑</Button>
          <Popconfirm title={`确定${status === 1 ? '下' : '上'}架?`} onConfirm={() => { setBannerStatus({ informationId, status: status === 1 ? 2 : 1 }) }}>
            <Button type="link">{`${status === 1 ? '下' : '上'}架`}</Button>
          </Popconfirm>
        </Space>
      )
    },
  ];
  // 查询
  const getDataList = () => {
    getinformationList(reqForm).then((res) => {
      if (res.code === 0) {
        setData(res.data)
      }
    });
  }
  // 设置选项内容
  const onFinish: FormProps<informationReqType>['onFinish'] = (e) => {
    setReqForm(e);
  };

  // 分页切换
  const onChange: PaginationProps['onChange'] = (page, size) => {
    setReqForm(produce((draft) => {
      draft.paging = { page, size }
    }));
  };

  // 上下架
  const setBannerStatus = (e: informationReqStateType) => {
    updateinformationStatus(e).then((res) => {
      if (res.code === 0) {
        getDataList();
        message.success("修改成功");
      }
    })
  }
  // 初始化加载
  useEffect(() => {
    getDataList()
  }, [reqForm])

  return (
    <>
      <div className={styles.Hader}>
        <h2>资讯管理</h2>
        <Form
          layout='inline'
          onFinish={onFinish}
          initialValues={reqForm}
          form={form}
        >
          <Form.Item<informationReqType> name="keywords" style={{ width: 250 }} label="标题">
            <Input placeholder="请输入标题" />
          </Form.Item>
          <Form.Item>
            <Space>
              <Button type="primary" htmlType='submit'>查询</Button>
              <Button htmlType="reset" onClick={() => { form.resetFields() }}>
                重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </div>
      <TableComponent<informationResDataType> data={data.data} columns={columns}>
        <Button type="primary" onClick={()=>{
          setIsModalOpen(true);
          setModalType('add')}}>添加</Button>
      </TableComponent>
      <PaginationComponent count={data.count} onChange={onChange} />
      {/* 弹窗新增或编辑 */}
      <AddOrEdit isModalOpen={isModalOpen} informationId={informationId} type={modalType} handleCancel={()=>{
        setIsModalOpen(false);
        getDataList();
      }}/>
    </>
  );
};

export default Information;